<template>
  <div>
    <!-- 注意-默认清况，只要van-list被渲染出来，会立即触发事件 -->
    <!-- 注意-只要van-list组件的load事件被触发了，会自动把loading设置为true -->
    <!-- 注意--如果在触发load事件的时候 ，loading的值为true，则不会再次触发load事件 -->
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了" @load="onLoad" :immediate-check="false">
      <!-- 使用大数对象的时候，要调用大数对象提供的toString方法转成字符串 -->
    <art-item v-for="item in artlist" :key="item.art_id.toString()" :article='item' @remove-artlist='removeArtlist'></art-item>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 1.按需导入Api接口
import { getArtListApi } from '@/api/homeApi.js'
// 导入ArtItem组件
import ArtItem from '@/components//ArtItem/Artitem.vue'
export default {
  name: 'ArtList',
  props: {
    // 频道的id
    channelId: {
      type: Number, // 数据类型
      require: true// 必填项
    }
  },
  // 2.存储请求数据
  data () {
    return {
      // 文章列表的数组
      artlist: [],
      // 是否正在进行上拉加载的请求
      loading: false,
      // 所有数据是否加载完毕了
      finished: false,
      // 是否正在进行下拉刷新的请求
      isRefresh: false
    }
  },
  // 4.在created中调用初始化请求方法
  created () {
    this.initArtList()
  },
  methods: {
    // 3.初始化文章列表数据方法
    // 如果调用initArtList方法期间，state的值为true，则下拉刷新；否则上拉加载
    async initArtList (state) {
      // 只要方法内部用到了await，则方法必须要被async修饰
      const { data: res } = await getArtListApi(this.channelId)
      if (res.message === 'OK') {
        // 把请求数据存到data里
        // this.artlist = res.data.results
        if (state) {
          // 下拉刷新
          // 下拉刷新，新数据在前，旧数据在后
          this.artlist = [...res.data.results, ...this.artlist]
          // 重置isRefresh为false，否则无法触发下次下拉刷新
          this.isRefresh = false
        } else {
          // 上拉加载
          // 上拉加载更多，旧数据在前，新数据在后
        this.artlist = [...this.artlist, ...res.data.results]
        // 重置loading值为false，否则无法触发下次事件
        this.loading = false
        }

        // 判断数据是否加载完毕
        if (res.data.results.length === 0) {
          this.finished = true
        }
      }
    },
    // 上拉加载更多的事件函数
    onLoad () {
      this.initArtList()
    },
    // 下拉刷新函数
    onRefresh () {
      this.initArtList(true)
    },
    // 触发ArtItem组件的@remove-artlist事件
    removeArtlist (id) {
      // 调用数组filter方法进行过滤，过滤结果为新数组
      this.artlist = this.artlist.filter(item => item.art_id.toString() !== id)
      // 如果剩余数据小于10条，则主动加载下一页数据
      if (this.artlist.length < 10) {
        this.initArtList()
      }
    }
  },
  // 注册组件
  components: {
    ArtItem
  }
}
</script>

<style lang='less' scoped>
</style>
